// 这个webpack的配置文件  webpack.config.js    vue.config.js

const { join } = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  // 把所有的配置都放到这个对象里面
  mode: 'development', // development（开发）     production（生产）
  entry: './src/index.js', // 打包的入口，默认是 src/index.js
  output: {
    path: join(__dirname, 'dist'), // 目录必须用绝对路径
    filename: 'js/bundle.js', // 这里加入 js 文件夹。
    assetModuleFilename: 'images/[hash:8][ext]' // 配置文件（图片）的输出路径
  },
  // 下面是配置插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlPlugin({
      template: join(__dirname, 'public', 'index.html'), // public中，你的html叫什么
      filename: 'index.html' // 打包后的html叫什么（这个文件会生成到dist文件夹）
    })
  ],
  // 配置自动打包。会创建一个本地服务器，打包后，我们需要使用 localhost:8080 去访问页面
  devServer: {
    // port: 9000, // 实时打包所用的端口号
    open: true // 初次打包完成后，自动打开浏览器
  },
  // 下面配置loader
  module: {
    rules: [
      // 处理css文件
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理less文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理html中img标签引入的图片
      { test: /\.html$/, use: 'html-loader' },
      // 处理图片资源
      {
        test: /\.(jpg|png|gif)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 12000, // 图片超过这个大小，使用原图片，否则使用base64字符串
          }
        }
      }
    ]
  }
}